<!-- 报警列表 -->
<template>
	<view class="hide-border dropdown-shadow">
		<fa-navbar title="报警"></fa-navbar>
		<view class="tabs-wrap">
			<view class="tabs">
				<view style="width: 16.66666666%;margin-left: 16.666666666%;text-align: center;" :style="current === 0 ? 'color: #2979ff' : ''" @click="tabSwitch(0)">待处理</view>
				<view style="width: 16.66666666%;margin-left: 33.333333333%;text-align: center;" :style="current === 1 ? 'color: #2979ff' : ''" @click="tabSwitch(1)">已处理</view>
			</view>
			<view style="width: 16.666666666%;margin-left: 16.6666666666%;text-align: center;" :class="current === 1 ? 'beam-move-right' : 'beam-move-left'">
				<view class="beam"></view>
			</view>
		</view>
		<view> </view>
		<u-dropdown class="fa-dropdown" ref="uDropdown">
			<u-dropdown-item :title="dropdownTitle.alarmType || '报警类别'">
				<view class="slot-content">
					<view class="select-box">
						<view class="select-item item-4" @click="addOrRm({'alarmType': 'FASG_WARNING_TYPE_0001'})" :class="selectOn({'alarmType': 'FASG_WARNING_TYPE_0001'})">非法带出</view>
						<view class="select-item item-4" @click="addOrRm({'alarmType': 'FASG_WARNING_TYPE_0002'})" :class="selectOn({'alarmType': 'FASG_WARNING_TYPE_0002'})">设备故障</view>
						<view class="select-item item-4" @click="addOrRm({'alarmType': 'FASG_WARNING_TYPE_0003'})" :class="selectOn({'alarmType': 'FASG_WARNING_TYPE_0003'})">转移超时</view>
					</view>
					<view class="footer-padding"></view>
					<view class="footer">
						<view class="reset" @click="reset('alarmType')"><image src="../../static/images/clear.svg"></image>重置</view>
						<view class="changer" @click="filterUpdater">查看</view>
					</view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item :title="dropdownTitle.org || '所属房产'">
				<view class="slot-content">
					<view class="select-box">
						<view v-for="(org, index) in orgList"
							:key="index"
							class="select-item item-3 text-ellipsis" 
							:class="selectOn({'org': org.ID})"
							@click="addOrRm({'org': org.ID})"
							>{{org.OrgName}}</view>
					</view>
					<view class="footer-padding"></view>
					<view class="footer">
						<view class="reset" @click="reset('org')"><image src="../../static/images/clear.svg"></image>重置</view>
						<view class="changer" @click="filterUpdater">查看</view>
					</view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item :title="dropdownTitle.risk || '风险等级'">
				<view class="slot-content">
					<view class="select-box">
						<view class="select-item item-4" @click="addOrRm({'risk': 'FASG_RISK_LEVEL_0001'})" :class="selectOn({'risk': 'FASG_RISK_LEVEL_0001'})">高危</view>
						<view class="select-item item-4" @click="addOrRm({'risk': 'FASG_RISK_LEVEL_0002'})" :class="selectOn({'risk': 'FASG_RISK_LEVEL_0002'})">中危</view>
					</view>
					<view class="footer-padding"></view>
					<view class="footer">
						<view class="reset" @click="reset('level')"><image src="../../static/images/clear.svg"></image>重置</view>
						<view class="changer" @click="filterUpdater">查看</view>
					</view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item :title="dropdownTitle.date || '报警时间'">
				<view class="slot-content">
					<view class="tips">常用时间</view>
					<view class="select-box" style="padding-bottom: 0;">
						<view class="select-item item-4" @click="selectDate('today')" :class="selected.date === 'today' ? 'selected' : ''">今天</view>
						<view class="select-item item-4" @click="selectDate('weekly')" :class="selected.date === 'weekly' ? 'selected' : '' ">最近一周</view>
						<view class="select-item item-4" @click="selectDate('monthly')" :class="selected.date === 'monthly' ? 'selected' : '' ">最近一个月</view>
						<view class="select-item item-4" @click="selectDate('all')" :class="selected.date === 'all' ? 'selected' : '' ">全部</view>
					</view>
					<view class="tips" style="padding-top: 0;">自定义时间</view>
					<!-- 自定义日期选择 -->
					<view class="select-box" style="padding-top: 0;">
						<view class="select-item item-2 date" @click="show.datePicker = true">{{dateRange.start || '起始时间'}}</view>
						<text class="date" style="line-height: 64rpx;">至</text>
						<view class="select-item item-2 date" @click="show.datePicker = true">{{dateRange.end || '结束时间'}}</view>
					</view>
					<view class="footer-padding"></view>
					<view class="footer">
						<view class="reset" @click="reset('time')"><image src="../../static/images/clear.svg"></image>重置</view>
						<view class="changer" @click="filterUpdater">查看</view>
					</view>
				</view>
			</u-dropdown-item>
		</u-dropdown>
		<!-- 报警列表 -->
		<view class="alarm-list">
			<view class="alarm-list-item" @click="toDetail(alarm.Guid, alarm.ImgUrl)" v-for="alarm in alarmList" :key="alarm.Guid">
				<view class="title flex-between">
					<view class="date">{{alarm.CreateTime | dateFormat}}</view>
					<view class="label" :style="alarm.IsHandle ? 'color: #2E73E5;background: #EAF1FC' : ''">{{alarm.IsHandle ? '已处理' : '待处理'}}</view>
				</view>
				<view class="body">
					<view v-if="alarm.AlarmType === 'FASG_WARNING_TYPE_0002'" class="body-left"><image :src="alarm.ImgUrl || '../../static/images/door-card.png'"></image></view>
					<view v-else class="body-left"><image :src="alarm.ImgUrl || '../../static/images/nopic.png'"></image></view>
					<view class="body-right">
						<view class="text-ellipsis" style="color: #2A2A2A;font-size: 28rpx;font-weight: 500;max-width: 75%;">{{alarm.AssetName || alarm.DeviceName}}</view>
						<view style="color: #646464;font-size: 24rpx;margin-bottom: 10rpx;width: 60%;" class="text-ellipsis">{{alarm.EpcId || alarm.DeviceId}}</view>
						<view style="color: #999999;font-size: 24rpx;">{{alarm.OrgName}}</view>
						<view class="flex-between">
							<view style="color: #999999;font-size: 24rpx;">{{alarm.AssetTypeText || '其他'}}</view>
							<view style="color: #333333;font-size: 22rpx;padding-right: 20rpx;">
							{{alarm.AlarmType === 'FASG_WARNING_TYPE_0001' ? '非法带出' : alarm.AlarmType === 'FASG_WARNING_TYPE_0002' ? '设备故障' : '转移超时'}}
							</view>
						</view>
					</view>
				</view>
				<view class="alarm-tips">
					<view><image :src="alarm.IsHandle ? '../../static/images/alarm-left.png' : alarm.Level === 'FASG_RISK_LEVEL_0001' ? '../../static/images/alarm-high.png' : '../../static/images/alarm-mid.png'"></image></view>
					<view style="font-size: 22rpx;" :style="`color: ${alarm.IsHandle ? '#999999' : alarm.Level === 'FASG_RISK_LEVEL_0001' ? '#E55D5D' : '#FDB656;'}`">{{alarm.LevelText}}</view>
				</view>
			</view>
			<view v-if="alarmList.length < 1" class="text-center col-gray" style="background-color: #F6F8FB;">没有数据</view>
		</view>
		<!-- 日期 -->
		<u-calendar v-model="show.datePicker" mode="range" @change="calenderHandler"></u-calendar>
		<!-- 加载更多 -->
		<u-loadmore v-show="alarmList.length > 0" :status="loadMoreStatus" @loadmore="loadMore" bg-color="#F6F8FB" />
		<view style="width: 100%;height: 30rpx;background-color: #F6F8FB;"></view>
	</view>
</template>

<script>
	import faNavbar from '@/components/fa-navbar/fa-navbar.vue'
	export default {
		components: {faNavbar},
		data() {
			return {
				current: 0,
				show: {
					datePicker: false
				},
				dateRange: {
					start: "",
					end: ""
				},
				selected: {
					date: "",  // 时间
					risk: [],  // 风险
					org: [],  // 房产
					alarmType: []  // 报警类别
				},
				orgList: [],
				alarmList: [],
				filterParams: {},
				noMore: false,
				loadMoreStatus: "loadmore",
				animateBeam: "",
				dropdownTitle: {
					date: "",
					risk: "",
					org: "",
					alarmType: "",
				}
			}
		},
		onLoad() {
			this.$api.getOrgList().then(res => {
				this.orgList = res.data;
			}).catch(err => {});
		},
		computed: {
			selectOn() {
				return ({alarmType, org, risk}) => {
					let target = alarmType ? this.selected.alarmType : org ? this.selected.org : this.selected.risk;
					let val = alarmType || org  || risk;
					return target.indexOf(val) >= 0 ? 'selected' : '';
				}
			},
		},
		watch: {
			'filterParams': {
				deep: true,
				handler(newVal, oldVal) {
					this.$api.getAlarmList(this.filterParams).then(res => {
						if (res.data) {
							if (this.filterParams.PageIndex > 1) {
								this.alarmList.push(...res.data.Data);
							} else {
								this.alarmList = res.data.Data;
							}
							if (res.data.TotalPage === res.data.Page) {
								this.loadMoreStatus = "nomore";
								this.noMore = true;
							} else {
								this.loadMoreStatus = "loadmore";
								this.noMore = false;
							}
						} else {
							this.alarmList = [];
						}
					}).catch(err => {
						uni.showToast({title: "网络错误，请稍后再试", icon: "none"});
					});
				},
				// immediate: true
			}
		},
		methods: {
			tabSwitch(selected) {
				this.current = selected;
				this.$nextTick(() => this.$refs.uDropdown.close());
				this.dateRange = {
					start: "",
					end: ""
				};
				this.selected = {
					date: "",  // 时间
					risk: [],  // 风险
					org: [],  // 房产
					alarmType: []  // 报警类别
				};
				this.filterParams = {
					"AlarmTypes": [],
					"OrgGuids": [],
					"Levels": [],
					"StartTime": null,
					"EndTime": null,
					"IsHandle": selected,
					"AlarmGuids": [],
					"PageIndex": 1,
					"PageSize": 10
				}; // = selected;
				this.dropdownTitle = {
					date: "",
					risk: "",
					org: "",
					alarmType: "",
				}
			},
			calenderHandler(selectData) {
				this.dateRange.start = selectData.startDate;
				this.dateRange.end = selectData.endDate;
				this.selected.date = "";
			},
			selectDate(_type) {
				this.selected.date = _type;
				let now = new Date();
				switch(_type) {
					case "today":
						let today = this.dateFormat("YYYY-mm-dd", new Date());
						this.dateRange.start = today;
						this.dateRange.end = today;
						break;
					case "weekly":
						let lastWeek = new Date(now.getTime() - 1000 * 60 * 60 * 24 * 7);
						this.dateRange.start = this.dateFormat("YYYY-mm-dd", lastWeek);
						this.dateRange.end = this.dateFormat("YYYY-mm-dd", now);
						break;
					case "monthly":
						let lastMonth = new Date(now.getTime() - 1000 * 60 * 60 * 24 * 30);
						this.dateRange.start = this.dateFormat("YYYY-mm-dd", lastMonth);
						this.dateRange.end = this.dateFormat("YYYY-mm-dd", now);
						break;
					default:   // all
						this.dateRange.start = "";
						this.dateRange.end = "";
				}
			},
			dateFormat(fmt, date) {
			    let ret;
			    const opt = {
			        "Y+": date.getFullYear().toString(),        // 年
			        "m+": (date.getMonth() + 1).toString(),     // 月
			        "d+": date.getDate().toString(),            // 日
			        "H+": date.getHours().toString(),           // 时
			        "M+": date.getMinutes().toString(),         // 分
			        "S+": date.getSeconds().toString()          // 秒
			        // 有其他格式化字符需求可以继续添加，必须转化成字符串
			    };
			    for (let k in opt) {
			        ret = new RegExp("(" + k + ")").exec(fmt);
			        if (ret) {
			            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
			        };
			    };
			    return fmt;
			},
			addOrRm({alarmType, org, risk}) {
				let target = alarmType ? this.selected.alarmType : org ? this.selected.org : this.selected.risk;
				let val = alarmType || org  || risk;
				let index = target.indexOf(val);
				if (index >= 0) {
					target.splice(index, 1);
				} else {
					target.push(val);
				}
			},
			toDetail(detailId, imgUrl) {
				uni.navigateTo({url: `/pages/alarm/detail?detailId=${detailId}&imgUrl=${imgUrl || ''}`});
			},
			filterUpdater() {
				let filter = JSON.parse(JSON.stringify(this.filterParams));
				filter.AlarmTypes = this.selected.alarmType.slice(0);
				filter.Levels = this.selected.risk.slice(0);
				filter.OrgGuids = this.selected.org.slice(0);
				filter.StartTime = this.dateRange.start ? new Date(this.dateRange.start.replace(/-/g, "/")).getTime() : null;
				filter.EndTime = this.dateRange.end ? new Date(this.dateRange.end.replace(/-/g, "/")).getTime() : null;
				if (filter.EndTime) {
					filter.EndTime += 1000 * (60 * 60 * 23 + 60 * 59 + 59);
				}
				filter.PageIndex = 1;
				this.filterParams = filter;
				
				this.dropdownTitle.org = "";
				if (this.selected.org.length > 0) {
					this.selected.org.forEach(k => this.dropdownTitle.org += this.orgList.find(item => item.ID === k).OrgName + ',');
					this.dropdownTitle.org = this.dropdownTitle.org.substr(0, this.dropdownTitle.org.length - 1);
				}
				
				this.dropdownTitle.date = "";
				if (this.selected.date === 'all') {
					this.dropdownTitle.date = "全部";
				} else if (this.selected.date === 'weekly') {
					this.dropdownTitle.date = "最近一周";
				} else if (this.selected.date === 'monthly') {
					this.dropdownTitle.date = '最近一个月';
				} else if (this.selected.date === 'today') {
					this.dropdownTitle.date = "今天";
				} else if (this.dateRange.start) {
					this.dropdownTitle.date = "自定义时间";
				}
				
				this.dropdownTitle.risk = "";
				this.selected.risk.forEach(r => {
					if (r === 'FASG_RISK_LEVEL_0001') {
						this.dropdownTitle.risk += "高危,"
					} else {
						this.dropdownTitle.risk += "中危,"
					}
				});
				this.dropdownTitle.risk = this.dropdownTitle.risk.substr(0, this.dropdownTitle.risk.length - 1);
				
				this.dropdownTitle.alarmType = "";
				this.selected.alarmType.forEach(a => {
					if (a === 'FASG_WARNING_TYPE_0001') {
						this.dropdownTitle.alarmType += '非法带出,';
					} else if (a === 'FASG_WARNING_TYPE_0002') {
						this.dropdownTitle.alarmType += '设备故障,';
					} else {
						this.dropdownTitle.alarmType += '转移超时,';
					}
				});
				this.dropdownTitle.alarmType = this.dropdownTitle.alarmType.substr(0, this.dropdownTitle.alarmType.length - 1);
				this.$refs.uDropdown.close();
			},
			reset(_type) {
				switch(_type) {
					case "alarmType": 
						this.selected.alarmType = [];
						break;
					case "level":
						this.selected.risk = [];
						break;
					case "org":
						this.selected.org = [];
						break;
					default:   // time
						this.dateRange.start = "";
						this.dateRange.end = "";
						this.selected.date = "";
				}
				// this.filterUpdater();
				//
			},
			loadMore() {
				if (!this.noMore) {
					this.loadMoreStatus = "loading";
					this.filterParams.PageIndex = this.filterParams.PageIndex + 1;
				}
			}
		},
		onReachBottom() {
			this.loadMore();
		},
		onShow() {
			this.tabSwitch(this.current);
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content {
		min-height: 400rpx;
		background-color: #FFF;
		position: relative;
		.select-box {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			max-height: 600rpx;
			overflow-y: auto;
			.select-item {
				height: 64rpx;
				background: #F6F8FB;
				border-radius: 2px;
				color: #2A2A2A;
				text-align: center;
				line-height: 64rpx;
				margin: 0 10rpx;
				padding: 0 6rpx;
				margin-bottom: 20rpx;
			}
			.selected {
				color: #2E73E5 !important;
				background: #ECF4FF;
			}
			.item-4 {
				width: 22% !important;
			}
			.item-3 {
				width: 30% !important;
			}
			.item-2 {
				width: 45% !important;
			}
			.date {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}
		.tips {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #2A2A2A;
			padding: 10rpx 20rpx;
		}
		.footer {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			padding: 20rpx;
			display: flex;
			flex-wrap: wrap;
			image {
				width: 45rpx;
				height: 45rpx;
				vertical-align: middle;
				margin-right: 15rpx;
			}
		}
		.footer-padding {
			width: 100%;
			height: 120rpx;
		}
		.reset,
		.changer {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}
		.reset {
			width: 30%;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #2A2A2A;
		}
		.changer {
			width: 70%;
			background: linear-gradient(310deg, #5BABF4 0%, #2E73E5 100%);
			border-radius: 20px;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.alarm-list {
		width: 100%;
		min-height: 81.4vh;
		background: #F6F8FB;
		padding: 30rpx 40rpx;
		.alarm-list-item {
			width: 100%;
			height: 260rpx;
			background: #FFFFFF;
			box-shadow: 0px 4px 12px 0px rgba(61, 76, 98, 0.12);
			border-radius: 4px;
			position: relative;
			margin-bottom: 30rpx;
			.title {
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				border-bottom: 1px solid #ECECF0;
				padding: 0 20rpx;
				.label {
					padding: 0 10rpx;
					margin-top: 12rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #fceeee;
					border-radius: 2px;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #E55D5D;
				}
				.date {
					font-size: 24rpx;
					font-family: Roboto-Regular, Roboto;
					font-weight: 400;
					color: #999999;
				}
			}
			.body {
				// display: flex;
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				padding-top: 20rpx;
				.body-left {
					width: 30%;
					text-align: center;
					image {
						width: 148rpx;
						height: 148rpx;
						vertical-align: middle;
					}
				}
				.body-right {
					width: 70%;
				}
			}
			.alarm-tips {
				position: absolute;
				right: 40rpx;
				top: calc(50% - 40rpx);
				width: 60rpx;
				height: 100rpx;
				text-align: center;
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}
	.tabs-wrap {
		.tabs {
			display: flex;
			font-size: 30rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-weight: 600;
		}
		.beam {
			width: 30%;
			margin-left: 35%;
			height: 6rpx;
			background-color: #2979ff;
		}
		.beam-move-right {
			animation: beam-to-right .3s forwards;
		}
		.beam-move-left {
			animation: beam-to-left .3s forwards;
		}
		@keyframes beam-to-right {
			from {margin-left: 16.666666666%;}
			to {margin-left: 66.6666666666%;}
		}
		@keyframes beam-to-left {
			from {margin-left: 66.6666666666%;}
			to {margin-left: 16.666666666%;}
		}
	}
</style>
